<template>
  <div class="flow-list-container" v-if="show">
    <div
      class="flow-line"
      v-for="(item, index) in sourceList"
      :key="index"
      :style="{ justifyContent: sourceList.length == 1 && 'center' }"
    >
      <div
        class="flow"
        :style="{ width: 100 / lineNum + '%' }"
        v-for="(flow, idx) in item.data"
        :key="idx"
        :class="[
          flow.$$leftSpce && 'leftSpce',
          flow.$$hasLine && 'hasLine',
          !flow.$$reverse && flow.$$nodeStatus,
          flow.$$nodeStatus && flow.$$reverse && 'active',
          flow.$$nodeStatus == 'current' && 'current',
          item.$$reverse && 'reverse',
        ]"
      >
        <!--  -->
        <div class="index" @click="handleClick(flow)">{{ flow.$$index }}</div>
        <!-- 拐点 -->
        <div
          :class="[
            'turningPoint',
            flow.$$leftTurningPoint && 'leftTurningPoint',
            flow.$$rightTurningPoint && 'rightTurningPoint',
          ]"
          v-if="flow.$$turningPoint"
        ></div>
        <!-- 描述 -->
        <div class="flow-desc sub-title" v-if="flow.subTitle">
          {{ flow.subTitle }}
        </div>
        <div class="flow-desc">
          {{ flow[replaceFields] }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "flow-list",
  props: {
    //数据源
    source: {
      type: Array,
      default: () => {
        return [];
      },
    },

    //单行节点数
    lineNum: {
      type: Number,
      default: 8,
    },

    //替换source中的label字段
    replaceFields: {
      type: String,
      default: "label",
    },
  },

  computed: {
    comData() {
      let { lineNum, source } = this;
      return { lineNum, source };
    },
  },
  watch: {
    comData: {
      handler(val) {
        let { source } = val;
        this.show = false;
        source.forEach((v, i) => {
          v.$$index = i + 1;
          v.$$hasLine = false;
          v.$$leftTurningPoint = false;
          v.$$rightTurningPoint = false;
          v.$$leftSpce = false;
        });
        setTimeout((_) => {
          this.show = true;
          this.resetData(source);
        });
      },
      immediate: true,
    },
  },
  data() {
    return {
      show: false,
      sourceList: [],
    };
  },
  methods: {
    handleClick(flow) {
      this.$emit("click", flow);
    },

    //动态计算样式
    resetData(targetData = []) {
      let { lineNum } = this;
      targetData.forEach((v) => {
        v.$$hasLine = true;
      });
      let splitData = this.filterNum(targetData, lineNum);
      this.sourceList = [];
      splitData.forEach((v, i) => {
        if (i != 0 && (i + 1) % 2 == 0) {
          v = v.reverse();
          v[v.length - 1].$$hasLine = false;
          if (
            splitData.length > 1 &&
            i == splitData.length - 1 &&
            v.length < lineNum
          ) {
            v[0].$$leftSpce = true;
          }
          //拐点
          if (splitData.length > 1 && i < splitData.length - 1) {
            v[0].$$turningPoint = true;
            v[0].$$leftTurningPoint = true;
          }
          this.sourceList.push({
            $$reverse: true,
            data: v,
          });
        } else {
          //拐点
          if (splitData.length > 1 && i < splitData.length - 1) {
            v[v.length - 1].$$turningPoint = true;
            v[v.length - 1].$$rightTurningPoint = true;
            v[v.length - 1].$$hasLine = false;
          }
          this.sourceList.push({
            $$reverse: false,
            data: v,
          });
        }
        //最后一个节点
        if (splitData.length % 2 != 0 && i == splitData.length - 1) {
          v[v.length - 1].$$hasLine = false;
        }
      });
    },

    //重组数据
    reSortSource() {},

    //数组分割
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },
  },
};
</script>
<style lang="less" scoped>
.flow-list-container {
  background: #fff;
  border-bottom: 1px solid #e8ebf0;
  width: 100%;
  padding: 20px 0 0 100px;
  .flow-line {
    @defaultBgColor: #d9d9d9;
    @defaultColor: #999999;
    //
    @activeBgColor: var(--primary-color);
    @activeColor: #fff;
    .flex();

    .flow {
      height: 104px;
      position: relative;
      &.leftSpce {
        margin-left: auto;
      }
      &.current {
        .index {
          background: #4bc964;
          color: #fff;
          cursor: pointer;
        }
      }

      //描述
      .flow-desc {
        z-index: 999;
        text-align: center;
        transform: translateX(-34px);
        width: 100px;
        margin-top: 2px;
        //
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 2行省略
        overflow: hidden;
        -webkit-box-orient: vertical;
        font-size: 14px;
        &.sub-title {
          color: #999999;
          font-size: 12px;
          padding-top: 8px;
        }
      }
      //圆圈
      .index {
        content: attr(data-index);
        width: 32px;
        height: 32px;
        .flex();
        align-items: center;
        justify-content: center;
        background: @defaultBgColor;
        border-radius: 50%;
        color: @defaultColor;
      }
      //分割线
      &.hasLine {
        &::after {
          position: absolute;
          content: "";
          height: 3px;
          width: calc(100% - 40px);
          background: @defaultBgColor;
          top: 15px;
          left: 36px;
        }
      }
      //圆弧
      .turningPoint {
        position: absolute;
        &.leftTurningPoint {
          height: 106px;
          width: 50px;
          background: @defaultBgColor;
          left: -54px;
          top: 16px;
          border-radius: 50px 0 0 50px;
          &::before {
            height: 102px;
            width: 46px;
            background: #fff;
            position: absolute;
            content: "";
            border-radius: 46px 0 0 46px;
            left: 4px;
            top: 2px;
          }
        }
        &.rightTurningPoint {
          height: 106px;
          width: 50px;
          background: @defaultBgColor;
          left: 36px;
          top: 16px;
          border-radius: 0 50px 50px 0;
          &::before {
            height: 102px;
            width: 46px;
            background: #fff;
            position: absolute;
            content: "";
            border-radius: 0 46px 46px 0;
            left: 0px;
            top: 2px;
          }
        }
      }
      //激活节点
      &.active {
        .index {
          background: @activeBgColor;
          color: @activeColor;
          cursor: pointer;
        }
        &.hasLine {
          &::after {
            background: @activeBgColor;
          }
        }
        .turningPoint {
          position: absolute;
          &.leftTurningPoint {
            background: @activeBgColor;
          }
          &.rightTurningPoint {
            background: @activeBgColor;
          }
        }
      }
      //半激活结点
      &.half-active {
        .index {
          background: @activeBgColor;
          color: @activeColor;
          cursor: pointer;
        }
        &::after {
          background: @defaultBgColor;
        }
        &.reverse {
          &::after {
            background: @activeBgColor;
          }
        }
      }
    }
  }
}
</style>
